<template>
    <div class="container">
        <h1>倒计时器</h1>
        <div class="input-group">
            <!-- 输入小时 -->
            <input type="number" v-model="inputH" placeholder="小时" min="0" class="time-input" />
            <label>时</label>
            <!-- 输入分钟 -->
            <input type="number" v-model="inputM" placeholder="分钟" min="0" class="time-input" />
            <label>分</label>
            <!-- 输入秒 -->
            <input type="number" v-model="inputS" placeholder="秒" min="0" class="time-input" />
            <label>秒</label>
        </div>
        <div class="button-group">
            <!-- 设置倒计时按钮 -->
            <button @click="setTimer" class="btn">设置倒计时</button>
            <!-- 开始倒计时按钮，只有在设置了时间后才能点击 -->
            <button @click="startTimer" :disabled="!isTimerSet" class="btn"
                :class="{ disabled: !isTimerSet }">开始倒计时</button>
        </div>
        <!-- 显示当前计时 -->
        <p v-if="!isTimerEnd" class="timer-display">计时: {{ h }}时 {{ m }}分 {{ formatS }}秒</p>
        <p v-else class="timer-display">计时结束</p>
        <audio ref="audio" src="http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3" preload="auto"
            loop></audio>
        <audio ref="end_audio" preload="auto" src="//downsc.chinaz.net/Files/DownLoad/sound/huang/cd9/mp3/192.mp3"></audio>
    </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'

// 定义响应式变量
const h = ref(0)  // 小时
const m = ref(0)  // 分钟
const s = ref(0)  // 秒
const inputH = ref(0)  // 用户输入的小时
const inputM = ref(0)  // 用户输入的分钟
const inputS = ref(0)  // 用户输入的秒
const timer = ref(null)  // 定时器的引用
const isTimerSet = ref(false)  // 标记是否设置了倒计时
const isTimerEnd = ref(false) //标记是否计时结束

// 设置倒计时时间的函数
const setTimer = () => {
    h.value = inputH.value  // 设置小时
    m.value = inputM.value  // 设置分钟
    s.value = inputS.value  // 设置秒
    isTimerSet.value = true  // 标记为已设置
    isTimerEnd.value = false //计时未结束
    if (timer.value) clearInterval(timer.value);  // 清除旧的定时器
}

// 开始计时的函数
const startTimer = () => {
    if (timer.value) clearInterval(timer.value);  // 清除旧的定时器
    playSound() //播放开始计时音乐
    // 设置新的定时器
    timer.value = setInterval(() => {
        s.value--;  // 每秒减少秒数
    }, 1000); // 每隔1000毫秒更新一次
}

// 侦听秒的变化
watch(s, (newSeconds) => {
    if (newSeconds < 0) {  // 如果秒数小于0
        s.value = 59;  // 重置秒数为59
        m.value--;  // 分钟减少1
    }
})
// 侦听分的变化
watch(m, (newMinutes) => {
    if (newMinutes < 0) {  // 如果分钟数小于0
        m.value = 59;  // 重置分钟数为59
        h.value--;  // 小时减少1
    }
})
// 侦听小时的变化
watch(h, (newHours) => {
    if (newHours < 0) {
        h.value = 0
        // 倒计时结束时播放声音
        clearInterval(timer.value);  // 清除定时器
        endSound();  // 播放声音
        isTimerEnd.value = true
    }
})

// 使用计算属性把秒格式化
const formatS = computed(() => {
    return s.value < 10 ? '0' + s.value : s.value;  // 如果秒数小于10，前面补0
});

// 播放声音的函数
const audio = ref()
const end_audio = ref()
//计时开始
const playSound = () => {
    audio.value.play(); // 播放音频
}
//计时结束
const endSound = () => {
    audio.value.pause();
    // end_audio.value.currentTime = 0;
    isTimerSet.value = false
    end_audio.value.play();
    // setTimeout(()=>{
    //     end_audio.value.pause();
    // },2000);
}

</script>

<style scoped>
.container {
    max-width: 400px;
    /* 最大宽度 */
    margin: auto;
    /* 居中 */
    text-align: center;
    /* 文本居中 */
    padding: 20px;
    /* 内边距 */
    border: 2px solid #4992c3;
    /* 边框 */
    border-radius: 10px;
    /* 圆角边框 */
    background-color: #f9f9f9;
    /* 背景颜色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
}

h1 {
    margin-bottom: 20px;
    /* 底部间距 */
    color: #4992c3;
    /* 文字颜色 */
}

.input-group {
    margin-bottom: 20px;
    /* 底部间距 */
}

.time-input {
    width: 60px;
    /* 输入框宽度 */
    padding: 5px;
    /* 内边距 */
    margin: 0 5px;
    /* 左右间距 */
    border: 1px solid #4992c3;
    /* 边框 */
    border-radius: 5px;
    /* 圆角 */
    text-align: center;
    /* 文本居中 */
}

.button-group {
    margin-bottom: 20px;
    /* 底部间距 */
}

.btn {
    background-color: #4992c3;
    /* 按钮背景色 */
    color: white;
    /* 按钮文字颜色 */
    border: none;
    /* 无边框 */
    padding: 10px 20px;
    /* 按钮内边距 */
    border-radius: 5px;
    /* 圆角 */
    cursor: pointer;
    /* 鼠标光标为手型 */
    transition: background-color 0.3s;
    /* 背景颜色过渡 */
}

.btn:hover {
    background-color: #3f7da2;
    /* 悬停时的背景颜色 */
}

.disabled {
    background-color: #ccc;
    /* 禁用状态的背景颜色 */
    cursor: not-allowed;
    /* 鼠标光标为禁止 */
}

.timer-display {
    font-size: 1.2em;
    /* 字体大小 */
    margin-top: 15px;
    /* 上边距 */
}</style>